<template>
    <a-list size="large" bordered :data-source="data">
        <template #renderItem="{ item }">
            <a-list-item><a @click="modalFlag = true;com=item.component;title=item.title">{{ item.title }}</a></a-list-item>
        </template>
        <template #header>
            <div>常见问题</div>
        </template>
        <a-modal 
        :open="modalFlag" 
        :title="title"
        @ok="closeModal"
        @cancel="closeModal"
        >
            <component :is="com"></component>
        </a-modal>
    </a-list>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import P1 from './com/P1.vue'
import P2 from './com/P2.vue'
import P3 from './com/P3.vue'
import P4 from './com/P4.vue'
const data = ref([
    {
        title: "插件点击启动显示启动失败？",
        component: P1
    },
    {
        title: "吞食天地人物无法选择？",
        component: P2
    },
    {
        title: "登录所遇到的问题？",
        component: P3
    },
    {
        title: "自动更新后无法打开？",
        component: P4
    }
]);
const modalFlag = ref(false)
const com = ref(P1)
const title = ref('')
const closeModal = () => {
    modalFlag.value =false
}
</script>
  
  